<template>
   <div class="body">
        <div class="warp">
        <div class="product_warp">
           <div class="item-detail claerfix" v-for="(val,ind) in detailes" :key=ind>
               <div class="item-detail-left">
                   <h1 class="item-detail-title">
                       {{val.c_name}}
                   </h1>
                   <p class="item-detail-intro">{{val.c_detailes}}</p>
                   <div class="item-detail-box">
                       <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="项目详情" name="first">
        <ul class="xmxq">
            <li v-for="(val1,ind1) in imgs" :key="ind1">
                <img :src="val1">
            </li>
        </ul>
    </el-tab-pane>
    <el-tab-pane label="产品话题" name="second">
      <div v-if="!pinglun" class="pinglun"> 评论： <input v-model="comments" placeholder="评论不能少于三个字"/> <button @click="tijiao()">提交</button></div>
        <div v-if="pingluns"><div v-for="(val,ind) in comment" :key="ind" class="comment_warp">
            <div class="toxiang">
                <img :src="val.pl_img"/><span>{{val.u_name}}</span>
            </div>
            <p>{{val.pl_comment}}</p>
        </div></div>
        <div v-if="!pingluns">此商品还没有任何话题呢！</div>
    </el-tab-pane>
  </el-tabs>
                   </div>
               </div>
               <div class="item-detail-right">
                   <div class="item-detail-support">
                       <div class="item-detail-status" :style="'background:'+bgcolor">{{status}}</div>
                       <div class="item-money">
                           <span>已筹资金：</span>
                           <span class="yuan">￥</span>
                            <span class="num">{{val.c_arrive}}</span>
                       </div>
                       <div class="item-target">
                           <!-- <strong>{{val.c_arrive/val.c_targetmoney*100}}%</strong> -->
                           <!-- <span class="fr">达成：</span> -->
                           <span class="mubiao">目标金额：</span>
                           <strong class="po_this_num">￥{{val.c_targetmoney}}</strong>
                       </div>
                       <el-progress :percentage="baifen" :color="jdtcolor"></el-progress>
                        <div class="item-begin-time">剩余<span v-if="hasday">{{day}}天</span><span v-if="!hasday">{{hr}}时{{min}}分{{sec}}秒</span> </div>
                        <div class="item-actor-num">已有<b>{{val.c_support}}</b>人支持</div>
                   </div>
                   <div class="item-support-level clearfix">
                       <div class="top_box clearfix">
                           <span class="fr">限额{{val.max_yield}}位，剩余{{val.max_yield-val.c_support}}位</span>
                           <span><strong>￥</strong></span>
                           <span class="price">{{val.c_price}}</span>
                       </div>
                       <div class="bottom_box">
                           <p>配送费用：包邮</p>
                           <p>预计发放时间：项目筹款成功后的{{val.c_goodsday}}天内</p>
                           <div v-if="nostart&&!start&&!end" class="shangxian">
                               即将启动
                           </div>
                           <div v-if="!nostart&&start&&!end">
                               <button @click="support" v-if="val.max_yield-val.c_support>0">立即支持</button>
                           <div v-if="val.max_yield-val.c_support<=0" class="shangxian">众筹名额已达到上限</div>
                           </div>
                           <div v-if="!nostart&&!start&&end" class="shangxian">
                               众筹结束
                           </div>
                           <div class="thank">{{val.c_content}}</div>
                           <div class="company">发起公司：{{val.c_company}}</div>
                       </div>
                   </div>
                   <div class="item-support-level box">
                       <div class="top_box">
                           <span class="fengxian">风险提示</span>
                       </div>
                       <div class="bottom_box">
                           <p>1.众筹并非商品交易，存在一定风险。支持者根据自己的判断选择、支持众筹项目，与发起人共同实现梦想并获得发起人承诺的回报。</p>
                           <p>2.众筹平台仅提供平台网络空间及技术支持等中介服务，众筹仅存在于发起人和支持者之间，使用众筹平台产生的法律后果由发起人与支持者自行承担。</p>
                           <p>3.本项目必须在{{val.c_day}}之前达到￥{{val.c_targetmoney}}的目标才算成功，否则已经支持的订单将取消。订单取消或募集失败的，您支持的金额将原支付路径退回。</p>
                            <p>4.众筹成功后由发起人统一进行发货，售后服务由发起人统一提供；如果发生发起人无法发放回报、延迟发放回报、不提供回报后续服务等情况，您需要直接和发起人协商解决。</p>
                            <p>5.如您不同意上述风险提示内容，您有权选择不支持；一旦选择支持，视为您已确认并同意以上提示内容。
						</p>
                       </div>
                   </div>
               </div>
           </div>
        </div>
    </div>
   </div>
</template>

<script>
export default {
data () {
    return {
        comments:"",
    detailes:"",
     activeName: 'first',
     status:"",
     bgcolor:"",
     jdtcolor:"rgb(88, 255, 163)",
     day:"",
     hasday:true,
     hr:"",
     min:"",
     sec:"",
     show:true,
     id:"",
     imgs:[],
     baifen:"",
     comment:[],
     u_id:"",
     pinglun:false,
     nostart:false,
     start:false,
     end:false,
     pingluns:false

    }
},
created () {
    // console.log("id",this.$route.query.c_id);
      this.$axios.post("http://127.0.0.1:8081/client/crowdproductid",{
        c_id:this.$route.query.c_id
    }).then(res=>
    {
        // console.log("mmmmm",res.data.reslut);
        this.u_id=res.data.reslut[0].cu_id;
        // console.log(res.data.reslut[0])
        this.detailes=res.data.reslut;
        this.imgs=this.detailes[0].c_imgs.split(",");
        console.log("lllll",new Date(this.detailes[0].c_day).getTime(),new Date().getTime(),parseInt(this.detailes[0].startday))
        // console.log("startday",parseInt(this.detailes[0].startday))
        // console.log("")
        if(parseInt(this.detailes[0].startday)>(new Date().getTime()))
        {
             this.status="即将开启众筹";
            this.bgcolor="orange";
            this.nostart=true;
            this.start=false;
            this.end=false;
        }
       else if(parseInt(this.detailes[0].startday)<(new Date().getTime())&&(new Date().getTime())<new Date(this.detailes[0].c_day).getTime())
        {
            this.status="众筹中";
            this.bgcolor="rgb(88, 255, 163)";
             this.nostart=false;
            this.start=true;
            this.end=false;
        }
        else if((new Date().getTime())>new Date(this.detailes[0].c_day).getTime()&&(new Date().getTime())<new Date(this.detailes[0].c_fhtime).getTime())
        {
            this.status="众筹结束";
            this.bgcolor="#ccc000";
             this.nostart=false;
            this.start=false;
            this.end=true;
        }
       console.log(this.nostart,this.start,this.end)
        let times=this.detailes[0].c_day;
        this.countdown(times)
        this.baifen=parseFloat((this.detailes[0].c_arrive/this.detailes[0].c_targetmoney*100).toFixed(2))

    })
    this.$axios.post("http://127.0.0.1:8081/client/crowdcomment",{
        c_id:this.$route.query.c_id
    }).then(res=>
    {
    //   console.log("reeeeee",res.data.result);
      let result=res.data.result;
      if(res.data.status==0)
      {
          this.pinglun=false;
          this. pingluns=false

      }
      else{
           this.pinglun=false;
           this.pingluns=true
          for(let j=0;j<result.length;j++)
          {
              console.log(result[j].u_id,sessionStorage.getItem("userid"))
              if(result[j].u_id==sessionStorage.getItem("userid"))
              {
                  this.pinglun=true;
                  break;
              }
          }
         console.log("pinglun",this.pinglun)
          for(let i=0;i<res.data.result.length;i++){
            if(res.data.result[i].pl_sex==1)
            {
                res.data.result[i].pl_img="http://127.0.0.1:8081/upload/timg.jpg";
            }
            else{
                res.data.result[i].pl_img="http://127.0.0.1:8081/upload/timg (1).jpg";
            }
        }
        this.comment=res.data.result;
          console.log(this.comment);
      }
        
    })
    

},
mounted () {
  
},
methods: {
     handleClick(tab, event) {
        // console.log(tab, event);
      },
     tijiao()
     {
         if(this.comments.length<3)
         {
              this.$message({
            type: 'info',
            message: '评论长度不能小于三个字'
          }); 
         }
         else{
             
                  this.$axios.post("http://127.0.0.1:8081/client/addcomment",{
             c_id:this.$route.query.c_id,
             u_id:sessionStorage.getItem("userid"),
             u_name:sessionStorage.getItem("username"),
             pl_comment:this.comments,
             pl_sex:sessionStorage.getItem("usersex")
         }).then(res=>
         {
             console.log(res)
             if(res.data.status=="success")
             {
                           this.$message({
            type: res.data.status,
            message: res.data.msg
          });   
             }
        //      if(res.data.status=="success")
        //      {
        //           this.$axios.post("http://127.0.0.1:8081/client/upstatus",{cc_id:cc_id,cc_status:status}).then(res=>
        //  {
        //     console.log(res.data)
        //      this.reload();
        //  })
        //        this.$message({
        //     type: res.data.status,
        //     message: res.data.msg
        //   });   
        //      }
        //      else{
        //           this.$message({
        //     type: res.data.status,
        //     message: res.data.msg
        //   });   
        //      }
         
    })

     }},
       countdown(time) {
        //    console.log("time",time)
      const end = Date.parse(new Date(time))
    //   console.log("end",end)
      const now = Date.parse(new Date())
      const msec = end - now
      let day = parseInt(msec / 1000 / 60 / 60 / 24)
      let hr = parseInt(msec / 1000 / 60 / 60 % 24)
      let min = parseInt(msec / 1000 / 60 % 60)
      let sec = parseInt(msec / 1000 % 60)
      this.day =day;
      if(this.day==0)
      {
          this.hasday=false;
      }
      this.hr = hr > 9 ? hr : "0" + hr
      this.min = min > 9 ? min : "0" + min
      this.sec = sec > 9 ? sec : "0" + sec
      const that = this
      setTimeout(function () {
        that.countdown(time)
      }, 1000*60)
       },
       support()
       {

if(sessionStorage.getItem("username"))
{
    console.log(this.u_id,sessionStorage.getItem("userid"));
    if(this.u_id==sessionStorage.getItem("userid"))
    {
         this.$alert('您不能对自己的商品进行支持', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });
    }
    else{
        this.$router.push({path:"/tobuy",query:{tobuy:this.$route.query.c_id}});
    }
     
}
else{
     this.$confirm('您还未登录, 是否进入登录界面?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push("/login")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      }
}
          
       
       }
}
</script>

<style>
.body{
background: #f4f4f4;
}
.warp{
    width: 1080px;
    margin: 0 auto;
}
.product_warp{
        margin-bottom: 20px;
    width: 100%;
    min-width: 1190px;
    font-family: 'microsoft yahei';
    color: #333;
    overflow: hidden;
    
}
.item-detail{
    margin-top: 20px;
}
.item-detail-left{
    width: 800px;
    float: left;
    margin-right: 20px;
}
.item-detail-right{
    width: 360px;
    float: left;
    /* border: pink 1px solid; */
    margin-top:75px; 
    position: relative;
}
.item-money{
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    margin-bottom: 25px
}
.clearfix::after{
        clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    /* font-size: 0; */
    content: ""
}
.item-detail-title{
        line-height: 40px;
    font-weight: 100;
    font-size: 24px;
}
.item-detail-intro{
    line-height: 25px;
    color: #666;
    margin-bottom: 10px;
}
.item-detail-box{
    background: #fff;
    padding:10px 30px;
}
.el-tabs__item.is-active,.el-tabs__item:hover {
    color: #333
}
.hhh{
    color:rgb(255, 88, 88);
}
.el-tabs__active-bar{
    background: #F18D00
}
.el-tabs__nav-scroll{
    height: 50px;
    line-height: 50px;
}
.xmxq img{
    display: block;
    width: 100%;
}
.item-detail-support{
    /* border-bottom: 1px solid #e4e4e4; */
    padding: 45px 30px 30px;
    margin-bottom: 20px;
    background: #fff;
}
.item-detail-status{
    /* width:80px; */
    padding: 0 10px;
    text-align: center;
    height:40px;
    line-height:40px;
    position: absolute;
    top:0;
    left:20px;
    color: #fff;
    font-weight: bold
}
.item-money .yuan,.item-money .num{
        font-size: 30px;
    color: #f84d2c;
    line-height: 33px;
    font-family: arial;
}
.item-target{
    height: 30px;
    line-height: 35px;
}
.item-target strong, .fr{
    float:right;
}
/* .item-target strong{
    font-size: 20px;
} */
.item-target .fr{
    font-size: 14px;
}
.item-target .mubiao,.item-target .po_this_num{
    float: left;
}
.el-progress__text{
    position:absolute;
    right:-15px;
        font-size: 18px !important;
        font-weight: bold;
}
.item-begin-time{
        line-height: 30px;
    color: #666;
    margin-bottom: 15px;
    font-size: 14px;
    margin-top: 5px;
}
.item-actor-num {
    color: #999;
    line-height: 25px;
    font-size: 14px;
    }
.item-actor-num b{
    color: #666;
}
.item-support-level{
    
   margin-bottom: 20px;
}
.item-support-level .fr{
        color: #999;
    font-size: 14px;
}
.item-support-level .price{
font-size: 18px;
font-weight: bold
}
.item-support-level .top_box,.item-support-level .bottom_box
{
padding: 20px 30px;
background: #fff;
}
.item-support-level .bottom_box{
border-top: 1px solid #e4e4e4;
}
.bottom_box p{
    line-height: 23px;
    color: #999;
    font-size: 14px;
}
.bottom_box button{
    width: 310px;
        text-align: center;
    line-height: 45px;
    margin-top: 20px;
    border: none;
    background: none;
    background:orange;
    color:#fff;
    font-size: 20px;
    letter-spacing: 10px;
    font-weight: bold;
    border-radius: 10px;
}
.shangxian{
 width: 310px;
        text-align: center;
    line-height: 45px;
    margin-top: 20px;
    border: none;
    background: none;
    background:#eee;
    color:#fff;
    font-size: 20px;
    letter-spacing: 10px;
    font-weight: bold;
    border-radius: 10px;
}
.thank,.company{
    margin-top: 20px;
        color: #666;
    font-size: 14px;
    word-break: break-all;
}
.box p{
    margin-bottom: 5px;
}
/* .shangxian{
    margin-top: 10px;
} */
.toxiang{
    /* height: 40px;
    line-height: 40px; */
padding: 0 0 20px;
}
.toxiang img{
    display: inline-block;
    width: 40px;
    height: 40px;
}
.toxiang span{
   /* display: inline-block; */
   /* line-height: 40px;  */
   margin-left: 20px;
   color: #F18D00;
   font-size: 20px;
   font-weight: bold
}
.comment_warp{
    padding: 20px 20px;
    border-bottom: 1px #eee solid
}
.comment_warp p{
    padding-left:60px;
    line-height: 30px;
    font-size: 14px; 
}
.pinglun{
    margin-left: 20px;
    margin-top: 10px;
    color:#F18D00;
    position: relative;
}
.pinglun input{
    border: none;
    width: 250px;
    height: 40px;
    line-height: 40px;
    border: 1px #F18D00 solid;
    border-radius: 5px;
    padding-left: 10px;
}
.pinglun button{
    border: 1px #F18D00 solid;
    width: 100px;
    height: 40px;
    line-height: 40px;
    background: none;
    letter-spacing: 10px;
    font-weight: bold;
    position: absolute;
    top: 1px;
    left: 330px;
    color: #F18D00
}
.pinglun button:hover{
    background:#F18D00;
    color: #fff;
}
</style>
